import { Component } from "@angular/core";

// 以下就是组件结构
@Component({
     // 他指定了一个叫app-root的元素，该元素是index.html文件里的一个占位符的
     // 为什么这个组件跟入口index建立了联系呢？因为入口main.ts中绑定了主模块为appModule 
      selector:'app-user',       // 在模板中找到对应的标签，找到后创建并插入该组件实例       
      templateUrl:'./user.component.html',  // 组件模板
      styleUrls: ['./user.component.less'],                         // 组件样式
      // template 内联模板 和 templateUrl（外联模板二选一，teemplate后面可以直接跟html字符串）
      // 注意在模板语法(反问号)中是使用插值表达式，不能使用${}插入值   
      template:`<p>{{ title }}</p>`           
})
// 组件控制器，写逻辑代码
export class AppUser{
    // 基本绑定
    public placeholder:string = "Dan";
    // html内容绑定
    htmlStr:string = `<h1>标题</h1><script>location.href="www.baidu.com"</script>`
       title:String = 'user';
    // heightNum绑定
    heightNum:Number=10 
    // hasError绑定
    hasError:Boolean=true;
    // 样式绑定
    public titleStyles:Object = {
        color: "blue",
        fontStyle: "italic"
    }   
    // 遍历绑定
    arr:string[] = ['张三','李四','王五']; 
    //    构造函数可以用来进行属性的生命和初始化语句
    //    在angular里面有个特别重要的点要记住，只能通过构造函数注入依赖

    constructor(){}
    // 点击事件
    choseThis(e:{item:String,index:Number}){
         console.log(e)
    }
}

/** 
 * 创建组件命令 ng generate component 组件名 
 * 缩写创建 ng g c 组件名
 * 生成内联模板 ng g c 组件名 -it  
 */